<template>
  <div class="page flex-col">
    <div ref="pdf" class="section_1 flex-col">
      <div class="group_1 flex-row justify-between">
        <img class="image_1" referrerpolicy="no-referrer" src="../../../assets/images/logoImg.png" />
        <span class="text_1">编号：{{ cardDetail.reportCard.serialNo }}</span>
      </div>
      <div class="image_2" />
      <div class="text-wrapper_18 flex-col">
        <span class="text_80">厦门技师学院</span>
      </div>
      <span class="text_2">学生个人第二课堂成绩单</span>
      <div v-if="cardDetail.reportCard" class="group_2 flex-row">
        <img class="image_3" referrerpolicy="no-referrer"
          :src="avatar ? avatar : '../../../assets/images/profile_boy.png'" />
        <div class="text-wrapper_1 flex-col justify-between">
          <span class="text_3">姓名 <span>{{ cardDetail.reportCard.nickName }}</span></span> <span class="text_3">学号
            <span>{{ cardDetail.reportCard.userName }}</span></span>
          <span class="text_3">系部 <span>{{ cardDetail.reportCard.college }}</span></span> <span class="text_3">班级
            <span>{{ cardDetail.reportCard.classNo }}</span></span>
          <span class="text_3">专业 <span>{{ cardDetail.reportCard.major }}</span></span>
        </div>
        <div id="myChart" :style="{ width: '280px', height: '280px' }"></div>
        <div id="main1" ref="echart-right" style="width: 370px;height:270px;margin-left:20px"></div>
      </div>
      <div v-if="cardDetail.leagueOrg.length && cardDetail.leagueOrg.length > 0" class="titleBorder">项目类别
        <span>个人经历</span>
      </div>
      <el-table v-if="cardDetail.leagueOrg.length && cardDetail.leagueOrg.length > 0" :data="cardDetail.leagueOrg"
        border class="tablestyle" :cell-style="{ borderColor: '#2857A5', border: '1px solid #2857A5 ' }"
        :header-cell-style="{ background: '#2857A5', color: '#fff' }">
        <el-table-column align="center" prop="schoolYear" label="学期" width="180"></el-table-column>
        <el-table-column align="center" prop="college" label="指导单位"></el-table-column>
        <el-table-column align="center" prop="positionName" label="担任职务"></el-table-column>
        <el-table-column align="center" prop="markName" label="工作考核" width="180"></el-table-column>
      </el-table>
      <div v-if="cardDetail.campusActivity.length && cardDetail.campusActivity.length > 0" class="titleBorder">项目类别
        <span>文化活动</span>
      </div>
      <el-table v-if="cardDetail.campusActivity.length && cardDetail.campusActivity.length > 0"
        :data="cardDetail.campusActivity" border class="tablestyle"
        :cell-style="{ borderColor: '#2857A5', border: '1px solid #2857A5 ' }"
        :header-cell-style="{ background: '#2857A5', color: '#fff' }">
        <el-table-column align="center" prop="activityTime" label="活动时间" width="180"></el-table-column>
        <el-table-column align="center" prop="activityName" label="活动名称"></el-table-column>
        <el-table-column align="center" prop="activityContent" label="活动类型" width="180"></el-table-column>
        <el-table-column align="center" prop="duration" label="时长" width="180"></el-table-column>
        <el-table-column align="center" prop="participationType" label="参与类型" width="180"></el-table-column>
      </el-table>
      <div v-if="cardDetail.socialPractice.length && cardDetail.socialPractice.length > 0" class="titleBorder">项目类别
        <span>社会实践活动</span>
      </div>
      <el-table v-if="cardDetail.socialPractice.length && cardDetail.socialPractice.length > 0"
        :data="cardDetail.socialPractice" border class="tablestyle"
        :cell-style="{ borderColor: '#2857A5', border: '1px solid #2857A5 ' }"
        :header-cell-style="{ background: '#2857A5', color: '#fff' }">
        <el-table-column align="center" prop="time" label="时间" width="180"></el-table-column>
        <el-table-column align="center" prop="practicePlace" label="实践地点"></el-table-column>
        <el-table-column align="center" prop="teamName" label="团队名称"></el-table-column>
        <el-table-column align="center" prop="awarded	" label="获得奖项" width="180"></el-table-column>
      </el-table>
      <div v-if="cardDetail.volunteerActivity.length && cardDetail.volunteerActivity.length > 0" class="titleBorder">
        项目类别 <span>志愿服务活动</span></div>
      <el-table v-if="cardDetail.volunteerActivity.length && cardDetail.volunteerActivity.length > 0"
        :data="cardDetail.volunteerActivity" border class="tablestyle"
        :cell-style="{ borderColor: '#2857A5', border: '1px solid #2857A5 ' }"
        :header-cell-style="{ background: '#2857A5', color: '#fff' }">
        <el-table-column align="center" prop="time" label="时间" width="180"></el-table-column>
        <el-table-column align="center" prop="activityName" label="活动名称"></el-table-column>
        <el-table-column align="center" prop="duration" label="服务时长" width="180"></el-table-column>
      </el-table>
      <div v-if="cardDetail.personalityHonor.length && cardDetail.personalityHonor.length > 0" class="titleBorder">项目类别
        <span>个人荣誉</span>
      </div>
      <el-table v-if="cardDetail.personalityHonor.length && cardDetail.personalityHonor.length > 0"
        :data="cardDetail.personalityHonor" border class="tablestyle"
        :cell-style="{ borderColor: '#2857A5', border: '1px solid #2857A5 ' }"
        :header-cell-style="{ background: '#2857A5', color: '#fff' }">
        <el-table-column align="center" prop="time" label="时间" width="180"></el-table-column>
        <el-table-column align="center" prop="awardName" label="奖项名称"></el-table-column>
        <el-table-column align="center" prop="awardType" label="奖项类型" width="180"></el-table-column>
        <el-table-column align="center" prop="issuingUnit" label="颁发单位"></el-table-column>
      </el-table>
      <div class="image_15" />
      <img class="image_16" referrerpolicy="no-referrer" src="@/assets/images/icondown.png" />
    </div>
    <el-row style="padding: 20px">
      <el-button type="primary" @click="handleExport">导出成绩单</el-button>
    </el-row>
  </div>
</template>
<script>
import { getCardInfo } from "@/api/reportcard/card";
import html2canvas from "html2canvas";
import { downloadPDF } from "@/utils/pdf.js"
// import echarts from 'echarts';
// require('echarts/theme/macarons'); // echarts theme
export default {
  name: "cardPdf",
  data() {
    return {
      cardDetail: {},
      ageYdata: ['德育', '智育', '体育', '美育', '劳育'],
      sexData: ["70", "80", "88", "62", "98"],
      isPdf: false,
      avatar: null,
    };
  },
  created() {
    // console.log(this.$route.params.userName,this.$route.query);
    var userName = this.$route.params.userName;
    this.isPdf = this.$route.query.isPdf;
    this.getInfoDetail(userName);
  },
  mounted() {

  },
  methods: {
    // 导出pdf
    handleExport() {
      downloadPDF(this.$refs.pdf,this.cardDetail.reportCard.nickName + "成绩单.pdf")
    },
    /** 查询二课成绩单列表 */
    getInfoDetail(userName) {
      this.loading = true;
      getCardInfo(userName).then(response => {
        this.cardDetail = response.data;
        this.avatar = process.env.VUE_APP_BASE_API + "/api/images/showLocal?name=" + this.cardDetail.reportCard.avatar;
        // this.getBase64(imgUrl);
        this.loading = false;
        var cardList = [];
        cardList[0] = this.cardDetail.reportCard.moralEducation;
        cardList[1] = this.cardDetail.reportCard.intellectualEducation;
        cardList[2] = this.cardDetail.reportCard.sports;
        cardList[3] = this.cardDetail.reportCard.aestheticEducation;
        cardList[4] = this.cardDetail.reportCard.lawEducation;
        if (this.isPdf) {
          console.log(this.isPdf, "ispdf")
          this.handleExport();
        }
        this.$nextTick(function () {
          this.drawLine(cardList);
          this.ageChart(cardList);
        });
      });
    },
    getBase64(imgUrl) {
      let that = this
      window.URL = window.URL || window.webkitURL;
      var xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          var blob = this.response;
          console.log("blob", blob)
          let oFileReader = new FileReader();
          oFileReader.onloadend = function (e) {
            that.avatar = e.target.result
          };
          oFileReader.readAsDataURL(blob);
        }
      }
      xhr.send();
    },
    drawLine(cardList) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let dataMax = [
        { name: '德育', max: "10" },
        { name: '智育', max: "10" },
        { name: '体育', max: "10" },
        { name: '美育', max: "10" },
        { name: '劳育', max: "10" },
      ]
      let option = {
        //配置维度的最大值
        radar: {
          name: {
            show: true,
            color: '#666',
          },
          //   雷达图的指示器，用来指定雷达图中的多个变量（维度）
          indicator: dataMax,
          shape: 'polygon', //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
        },
        color: '#E06F72',
        series: [
          {
            type: 'radar',
            label: {
              show: true, //显示数值
            },
            areaStyle: {}, //每个雷达图形成一个阴影的面积
            data: [
              {
                name: '成绩',
                value: cardList,
              },
            ],
          },
        ],
      }
      // 绘制图表
      myChart.setOption(option);
    },
    //右边横向条形图
    ageChart(cardList) {
      var myChart = this.$echarts.init(this.$refs["echart-right"]);
      var category = ['德育', '智育', '体育', '美育', '劳育'];
      var barData = cardList;
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: { show: false },
          axisLabel: { show: false },
        },
        yAxis: {
          type: "category",
          data: category,
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: "成绩",
            type: "bar",
            data: barData,
            barWidth: 14,
            barGap: 10,
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "right",
                offset: [5, -2],
                textStyle: {
                  color: "#333",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 0,
              },
              normal: {
                barBorderRadius: 0,
                color: "#7B9DCB",
                // new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //   { offset: 0, color: "#3977E6" },
                //   { offset: 1, color: "#37BBF8" },
                // ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      })
    },
    ageChart1(cardList) {
      var myChart = this.$echarts.init(document.getElementById('main1'));
      var colorArr = ["#E06F72", "#7B9DCB", "#B4D27A", "#EC9379", "#E27CAE"]
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        color: "#7B9DCB",
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 1]
        },
        yAxis: {
          type: 'category',
          data: ['德育', '智育', '体育', '美育', '劳育']
        },
        series: cardList
      };

      myChart.setOption(option);
    },
  },
};
</script>




<style src="./common.css" />
<style lang="scss" scoped>
.page {
  position: relative;
  width: 100%;
  /* height: 1754px; */
  overflow: hidden;
  margin: 0 auto;

  /* ::v-deep .el-table__body {
    border-collapse: separate;
    border-spacing: 0 8px;
    table-layout: auto !important;
  } */

  .section_1 {
    position: relative;
    /* width: 90%; */
    margin: 0 auto;
    padding: 10px 40px;

    /* height: 1754px; */
    .group_1 {
      width: 80%;
      height: 65px;
      margin: 29px 0 0 0;

      .image_1 {
        width: 234px;
        height: 65px;
      }

      .text_1 {
        width: 77px;
        height: 24px;
        overflow-wrap: break-word;
        color: rgba(153, 153, 153, 1);
        font-size: 24px;
        text-align: right;
        white-space: nowrap;
        line-height: 24px;
        margin-top: 17px;
      }
    }

    .image_2 {
      /* width: 100%; */
      height: 5px;
      margin: 24px 0 0 0;
      background-color: #999;
    }

    .text-wrapper_18 {
      height: 45px;
      background-color: #2358A5;
      width: 271px;
      position: absolute;
      left: 484px;
      top: 99px;

      .text_80 {
        width: 271px;
        height: 27px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 29px;
        text-align: center;
        white-space: nowrap;
        line-height: 45px;
        /* margin: 10px 29px; */
      }
    }

    .text_2 {
      width: 407px;
      height: 35px;
      overflow-wrap: break-word;
      color: rgba(57, 62, 98, 1);
      font-size: 35px;
      text-align: left;
      white-space: nowrap;
      line-height: 35px;
      margin: 34px 0 0 416px;
    }

    .group_2 {
      /* width: 1024px; */
      height: 263px;
      margin: 42px 0 0 0;

      .image_3 {
        width: 180px;
        height: 240px;
        margin-top: 23px;
      }

      .text-wrapper_1 {
        width: 240px;
        height: 230px;
        margin: 33px 0 0 46px;
        font-size: 23px;

        .text_3 {
          width: 85px;
          height: 42px;
          overflow-wrap: break-word;
          color: rgba(57, 62, 98, 1);
          text-align: left;
          white-space: nowrap;
          line-height: 45px;

          span {
            color: #393E62;
            font-size: 21px;
          }
        }

      }
    }

    .titleBorder {
      width: 210px;
      height: 41px;
      border: solid 3px #2858A1;
      font-size: 21px;
      color: #2758A3;
      line-height: 40px;
      margin-top: 54px;
      margin-bottom: 21px;
      padding-left: 16px;

      span {
        color: #666;
      }
    }

    .tablestyle {
      border: 2px solid #2857A5;
    }


    .image_15 {
      /* width: 90%; */
      height: 5px;
      margin: 57px 0 0 0;
      background-color: #999;
    }

    .image_16 {
      width: 377px;
      height: 52px;
      margin: 18px 0 16px 0;
    }

  }
}
</style>
